<template>
  <div class="tinymce-editor">
      <div id="tinymceToolbar"></div>
      <vue-tinymce ref="editor" class="editor overflow-scroll" v-model="content" :setting="setting" />
  </div>
</template>
<script>
import { fetchUploadFile } from '@/api/tool';

export default {
  name: 'TinyEditor',
  props: {
    content: ''
  },
  components: {
    tinymce
  },
  data() {
    return {
      setting: {
        inline: false, // 设置内敛模式
        icons: 'custom',
        toolbar: 'code undo redo restoredraft | cut copy paste pastetext | bullist numlist| forecolor backcolor bold italic underline strikethrough link anchor fullscreen preview|lineheight image  axupimgs   media|alignleft aligncenter alignright alignjustify outdent indent indent2em hr| pagebreak insertdatetime  table  charmap emoticons  |styleselect |formatselect |fontselect |fontsizeselect |blockquote subscript superscript removeformat ',
        toolbar_drawer: 'wrap', // 工具栏模式，这里是滑行模式（当屏幕过小时，多余的工具会隐藏，点击更多按钮会出现其他工具，这里配置出现的特效）
        toolbar_sticky: false,
        autosave_ask_before_unload: false,
        //对应的插件
        plugins: 'print preview searchreplace autolink directionality visualblocks  visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave  indent2em autoresize  axupimgs ',
        // 需要用到的功能插件，如链接，列表等等
        language: 'zh-CN', // 语言，汉化
        branding: false, // 隐藏品牌，隐藏状态栏中显示的“ Powered by Tiny ”链接
        resize: false, // 是否可以缩放编辑器
        elementpath: false, // 在编辑器底部的状态栏中禁用元素路径。
        fixed_toolbar_container: '#tinymceToolbar', // 可以设置元素选择器指定工具栏嵌套在哪个元素里面
        custom_ui_selector: 'body', // 聚焦的元素
        noneditable_noneditable_class: 'mceNonEditable', // 使用此选项，您可以指定TinyMCE将使用的类名称，以确定使用noneditable插件时可编辑哪些内容区域。主要用入你想以代码的形式添加某些内容，并给这些内容设置类名，使他们不可编辑，只能整个删除
        init_instance_callback: editor => {
          editor.focus() // 初始化聚焦，让内联模式的编辑器工具显示
        },
        textpattern_patterns: [
          { start: '*', end: '*', format: 'italic'
          },
          { start: '**', end: '**', format: 'bold'
          },
          { start: '#', format: 'h1'
          },
          { start: '##', format: 'h2'
          },
          { start: '###', format: 'h3'
          },
          { start: '####', format: 'h4'
          },
          { start: '#####', format: 'h5'
          },
          { start: '######', format: 'h6'
          },
          { start: '1. ', cmd: 'InsertOrderedList'
          },
          { start: '* ', cmd: 'InsertUnorderedList'
          },
          { start: '- ', cmd: 'InsertUnorderedList'
          }
        ],
        min_height: 800, //高度
        // width: 760,
        fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
        font_formats: '微软雅黑;宋体;黑体;仿宋;楷体;隶书;幼圆',
        language: 'zh_CN', // 语言，汉化
        branding: false, // 隐藏品牌，隐藏状态栏中显示的“ Powered by Tiny ”链接
        resize: true, // 是否可以缩放编辑器
        elementpath: true, // 在编辑器底部的状态栏中禁用元素路径。
        fixed_toolbar_container: '#tinymceToolbar', // 可以设置元素选择器指定工具栏嵌套在哪个元素里面
        custom_ui_selector: 'body', // 聚焦的元素
        noneditable_noneditable_class: 'mceNonEditable', // 使用此选项，您可以指定TinyMCE将使用的类名称，以确定使用noneditable插件时可编辑哪些内容区域。主要用入你想以代码的形式添加某些内容，并给这些内容设置类名，使他们不可编辑，只能整个删除
        images_upload_url: 'http://47.103.2.155:8801/api/File/upload',
        //自定义上传图片的路径
        images_upload_handler: (blobInfo, success, failure) => {
          const isAccord = blobInfo.blob().type === 'image/jpeg' || blobInfo.blob().type === 'image/png' || blobInfo.blob().type === 'image/GIF' || blobInfo.blob().type === 'image/jpg' || blobInfo.blob().type === 'image/BMP';
          if (blobInfo.blob().size / 1024 / 1024 > 10) {
            this.$message("上传失败，图片大小请控制在 2M 以内")
          } else if (blobInfo.blob().type == isAccord) {
            this.$message('图片格式错误')
          } else {
            let formData = new FormData()
            let file = blobInfo.blob()
            // 服务端接收文件的参数名，文件数据，文件名
            formData.append('file', file, file.name)
            //调用上传图片的地址
            const fileUrl = this.uploadFile(formData);
            if (fileUrl) {
              return fileUrl
            } else {
              return ''
            }
          }
        }
      },
    }
  },
  watch: {
  //监听内容变化
    content(newValue, oldValue) {
      this.content = newValue || ''
    }
  },
  mounted() {
    tinymce.init({
      selector: '#tinydemo',
      inline: false,
    });
  },
  methods: {
    async uploadFile(fileData) {
      const { data } = await fetchUploadFile(fileData);
      if (data.code === 200) {
        return data.data.fileUrl;
      } else {
        this.$message("上传接口请求失败")
      }
      return ''
    },
  }
}
</script>